/* 設定版面底色跟大小 */
.background-style{
    background-color: lightblue;
    border: 1px dashed silver;
    width: 500px;
    height: 500px;
    margin-top: 2rem;
/* 設定版面的可縮放 */
    resize: both;
    overflow: auto;

}

/* 設定字體大小位置 */
.text-align{
    font-size: 1.8rem;
    padding: 2rem;
    text-align: center;
};

/* 設定全局固定值 */
*, *::after, *::before{
    box-sizing: border-box;
}

/* 設定容器的屬性 */
.container-1{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

/* 設定子元素的屬性 */
.i-tem1{

    margin: 5px;
    flex: 1 1 150px;
    background-color: lightcoral;
    border: 1px solid red;
    border-radius: 10px;
}

.container-2{
    display: grid;
    grid-template-columns: minmax(150px,25%) 1fr;
    /* margin: 0;
    padding: 0; */
}
.sidebar{
    background-color: palegoldenrod;
    height: 100%;
    margin: 0;
}
.content{
    background-color: lightsteelblue;
    height: 100%;
    margin: 0;
}

.container-3{
    display: grid;
    height: 100vh;
    grid-template: auto 1fr auto / auto 1fr auto;
}

header{
    background:lavenderblush;
    grid-column: 1/4;
}

.lift-sidebar{
    background-color:cyan ;
    grid-column: 1/2;
    padding: 2rem;
}


main{
    background-color:peachpuff ;
    grid-column: 2/3;
}

.right-sidebar{
    background-color:lemonchiffon ;
    grid-column: 3/4;
}

footer{
    background-color:lightgoldenrodyellow ;
    grid-column: 1/4;
}

.dashed-border{
    border: 1px dashed silver;
}

.container-4{
    height: auto;
    display: grid;
    grid-template-columns:repeat(3, 1fr) ;
    grid-gap: 1rem;
}

.photo{
    background-color: lightblue;
    height: 100px;
    width: 100px;
    

}

.card{
    display: flex;
    background-color: lemonchiffon;
    flex-direction: column;
    justify-content: space-between;
    padding: 1rem; 
}

.parent {
    background-color: lavenderblush;
    /* position: relative; */
    height: 200vh;

}

.child-1{
    background-color: cyan;
    position: sticky;
    top: 10px;
    left: 0px;
}
.child-2{
    background-color: peachpuff;
}
.child-3{
    background-color: lemonchiffon;
}

p {
    font-size: 25px;
    font-family: "Noto Sans TC","Rubik Wet Paint", serif;
    font-weight: 400;
    font-style: normal;
}



/* <uniquifier>: Use a unique and descriptive class name
/* <weight>: Use a value from 100 to 900

.noto-sans-tc-<uniquifier> {
  font-family: "Noto Sans TC", serif;
  font-optical-sizing: auto;
  font-weight: <weight>; 400~900
  font-style: normal;
}
.rubik-wet-paint-regular {
  font-family: "Rubik Wet Paint", serif;
  font-weight: 400;
  font-style: normal;
}

*/